<script setup lang="ts">
interface Props {}
const props = withDefaults(defineProps<Props>(), {});
import { useAppStoreHook } from "@/store";
const useAppStore = useAppStoreHook();
const cardOpen = computed(() => useAppStore.isOpen_uploadList);
onMounted(() => {
  document.body.addEventListener("click", (e) => {
    let target = e.target;
    // console.log("target",target);
    useAppStore.toggle_isOpen_uploadList(false);
  });
});
</script>

<template>
  <div class="uploadList" @click.stop="">
    <div
      class="svg-container"
      @click.stop="useAppStore.toggle_isOpen_uploadList(!cardOpen)"
    >
      <el-icon><Sort /></el-icon>
    </div>
    <el-card v-show="cardOpen" @click.stop="">
      <FIleUpload />
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.uploadList {
  position: relative;
  .svg-container {
    width: px2rem(25px);
    height: px2rem(25px);
    background: var(--el-bg-color);
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: var(--el-text-color-primary);
    &:hover {
      background: var(--el-mask-color-extra-light);
    }
  }
  .el-card {
    width: 50vw;
    max-width: px2rem(500px);

    position: absolute;
    top: 60px;
    right: 0;
    z-index: 99999;
    &:deep(.el-card__body) {
      padding: 0px;
    }
  }
}
</style>
